<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Console Formatter Demo</title>
  <style>
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 24px; }
    h1 { font-size: 18px; margin: 0 0 12px; }
    p { margin: 8px 0; color: #444; }
    button { margin-right: 8px; margin-top: 8px; }
    code { background: #f5f5f5; padding: 2px 6px; border-radius: 4px; }
  </style>
  <script defer src="../console_dev_tools_formatter/utils.js"></script>
  <script defer src="../console_dev_tools_formatter/formatter.js"></script>
  <script defer src="test.js"></script>
  </head>
<body>
  <h1>Console Formatter 测试</h1>
  <p>打开 DevTools（F12）→ Console，点击下面按钮或刷新页面观察输出。</p>
  <p>确保 DevTools 设置中已开启 <code>Enable custom formatters</code>。</p>

  <div>
    <button id="btn-log">console.log 测试（自动化）</button>
    <button id="btn-copy-test">测试复制功能</button>
    <button id="btn-length-test">测试长度限制</button>
    <button id="btn-primitive-test">测试值宽度限制</button>
    <button id="btn-depth2">设置预览层级 = 2</button>
    <button id="btn-depth3">设置预览层级 = 3</button>
    <button id="btn-depth4">设置预览层级 = 4</button>
    <button id="btn-auto-on">开启自动格式化</button>
    <button id="btn-auto-off">关闭自动格式化</button>
    <span id="auto-status" style="margin-left:8px;color:#666;"></span>
  </div>

  <p>也可在控制台中直接执行：
    <code>ConsoleFormatter.help()</code> - 查看详细说明<br>
    <code>ConsoleFormatter.setHeaderDepth(4)</code> - 设置预览层级<br>
    <code>ConsoleFormatter.enableAuto(true/false)</code> - 开启/关闭自动格式化
  </p>
</body>
</html>


